<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../../css/L3/course_report.css" />
    <link rel="stylesheet" href="../../css/iconfont.css" />
    <script src="../../plugins/jquery-3.6.0.min.js"></script>
    <script src="../../plugins/echarts.min.js"></script>
    <title>青少年科学教育研究中心</title>
  </head>
  <body>
    <div id="rooter">
      <!-- 页头部分 -->
      <div id="header">
        <div id="back" class="iconfont icon-fanhui"></div>
        <div id="head_title">走进科学</div>
        <div id="personal"></div>
      </div>

      <!-- 主体部分 -->
      <div id="content">
        <div id="page_title">本次课程完成啦</div>
        <!-- 知识点卡片 -->
        <div id="point_card">
          <img id="top_tag" src="../../images/角标.png" />
          <div id="card_title_1">本课知识点</div>
          <p>1、南极有极昼和极夜，是一种非常美的自然现象。</p>
          <p>
            2、随着温度的降低，睡会变成冰;
            <br />
            &nbsp; 随着温度的升高，冰又会变成水。
          </p>
          <p>3、冰融化成水是一个吸热量的过程。</p>
          <p>4、太阳照射深色物体比浅色物体升温快。</p>
        </div>
        <!-- 录音交互卡片 -->
        <div id="interaction_card">
          <div id="card_title_2">本课互动</div>
          <p>为什么文温度超过100度以后，水就消失了呢？</p>
          <div id="play_record">
            <div id="wave_left"></div>
            <div id="play_button"></div>
            <div id="wave_right"></div>
          </div>
        </div>
        <!-- 雷达图卡片 -->
        <div id="chart_card">
          <div id="card_title_3">本课能力五维图</div>
          <div class="fivefigure" id="fivefigure"></div>
        </div>
      </div>
      <!-- 页脚部分 -->
      <div id="footer">
        <div id="my_course">
          <!-- <img src="../../images/我的课程.png" alt="" /> -->
          <div class="icon"></div>
          <p>我的课程</p>
        </div>
        <div id="study_report">
          <!-- <img src="../../images/报告.png" alt="" /> -->
          <div class="icon"></div>
          <p>学习报告</p>
        </div>
      </div>
    </div>
  </body>
  <script type="module">
    import { modifyCourseStatus } from '../../js/modify_course_status.js';

    $(function () {
      let DESIGN_WIDTH = 750;
      let DESIGN_HEIGHT = 1334;
      $('html').css({
        'font-size': (window.innerWidth * 12) / DESIGN_WIDTH,
      });

      let waveInterval;

      // 页头部分的点击事件的设置
      $('#back').on('click', function (e) {
        e.stopPropagation();
        location.href = '../../index.html';
      });

      // 交互卡片中播放按键的电机事件
      $('#play_button').prop('isPlay', false);
      $('#play_button').on('click', function (e) {
        e.stopPropagation();
        toggleButtonMode(e.target);
      });

      // 页脚部分的点击事件的设置
      $('#my_course').on('click', function (e) {
        e.stopPropagation();
        location.href = '../../index.html';
      });
      $('#study_report').on('click', function (e) {
        e.stopPropagation();
        location.href = '../study_report.html';
      });

      // echart绘图部分
      let myChart = echarts.init(document.getElementById('fivefigure'));
      let option;
      option = {
        radar: {
          radius: '63%',
          name: {
            textStyle: {
              color: '#353535',
              fontFamily: '苹方-简',
              fontSize: '1.6rem',
            },
            padding: 0,
          },
          indicator: [
            { name: '认知观察', max: 10 },
            { name: '互动实践', max: 10 },
            { name: '想象创造', max: 10 },
            { name: '逻辑思考', max: 10 },
            { name: '比较判断', max: 10 },
          ],
        },
        series: [
          {
            name: '成绩',
            type: 'radar',
            data: [
              {
                value: [9, 1, 7, 6, 10],
              },
            ],
          },
        ],
      };

      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }

      // 浏览器窗口的大小发生变化的时候，重新加载网页。
      window.addEventListener('resize', function (e) {
        location.reload();
      });

      // 切换交互和卡片中的播放模式的函数
      function toggleButtonMode(element) {
        let _element = $(element);
        if (_element.prop('isPlay')) {
          // 第一步 切换播放按键的图片
          _element.css({
            'background-image': 'url(../../../../images/L2/播放键.png)',
          });
          // 声浪停止波动
          clearInterval(waveInterval);
        } else {
          // 第一步切换播放按键的图片
          _element.css({
            'background-image': 'url(../../../../images/L2/播放中.png)',
          });
          // 声浪开始波动
          setWaveAnimation();
        }
        _element.prop('isPlay', !_element.prop('isPlay'));
      }

      //设置声波动画
      function setWaveAnimation() {
        waveInterval = setInterval(() => {
          let positionXStr = $('#wave_left').css('background-position-x');
          let positionXNum = parseInt(
            positionXStr.substr(0, positionXStr.length - 1)
          );
          $('#wave_left').css(
            'background-position-x',
            positionXNum + 1.58 + 'rem'
          );
          $('#wave_right').css(
            'background-position-x',
            positionXNum + 1.58 + 'rem'
          );
        }, 200);
      }
      // 打开网页一秒以后改变课程的学习状态
      setTimeout(() => {
        modifyCourseStatus(
          3,
          {
            story_finish: true,
            principle_finish: true,
            labor_finish: true,
            report_finish: true,
          },
          { second_lock: false, third_lock: false, fourth_lock: false }
        );
      }, 1000);

      window.addEventListener('resize', function (e) {
        location.reload();
      });
    });
  </script>
</html>
